<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  props: {
    swiperOptions: {
      type: Object
    },
    slideTo: Object
  },
  mounted () {
    var mySwiper = new Swiper('.swiper-container', this.swiperOptions)
    if (this.slideTo.flag) {
      mySwiper.slideTo(this.slideTo.index, 1000, false)// 切换到第一个slide，速度为1秒
    }
  }
}
</script>

<style scoped lang="scss">
.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      width: 90px;
      height: 130px;

      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 300ms;
      transform: scale(0.8);
    }
    .swiper-slide-active,.swiper-slide-duplicate-active{
        transform: scale(1);
    }
</style>
